<template>
  <component :is="iconType" :type="iconName" :color="iconColor" :size="iconSize"/>
</template>

<script>
import Icons from '_c/icons'
export default {
  'name': 'CommonIcon',
  'components': { Icons },
  'props': {
    'type': {
      'type': String,
      'required': true
    },
    'color': String,
    'size': Number
  },
  'computed': {
    iconType() {
      return this.type.indexOf('_') === 0 ? 'Icons' : 'Icon'
    },
    iconName() {
      return this.iconType === 'Icons' ? this.getCustomIconName(this.type) : this.type
    },
    iconSize() {
      return this.size || (this.iconType === 'Icons' ? 12 : undefined)
    },
    iconColor() {
      return this.color || ''
    }
  },
  'methods': {
    getCustomIconName(iconName) {
      return iconName.slice(1)
    }
  }
}
</script>

<style>

</style>
